<template>
	<view class="content" v-if="isShow" @click.stop="isShow=false">
		<canvas @click.stop="" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"
			canvas-id="my-canvas"></canvas>
		<view class="save-btn" @click.stop="saveImage">保存图片</view>
	</view>
</template>

<script>
	export default {
		name: "qrcode-poster",
		props: {
			headerImg: {
				type: String,
				default: 'https://cos.xunmeng.icu/cartoonrabbit/static/logo.jpg'
			},
			title: {
				type: String,
				default: '输入标题'
			},
			subTitle: {
				type: String,
				default: '输入副标题'
			},
			price: {
				type: Number,
				default: 36.89
			},
			content: {
				type: String,
				default: ""
			},
			bottomAdImg: {
				type: String,
				default: 'https://cos.xunmeng.icu/cartoonrabbit/static/buttom.jpg'
			}
		},
		data() {
			return {
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				isShow: false,
				qrcode: ''
			}
		},
		methods: {
			//显示
			showCanvas(qrcode) {
				this.isShow = true
				this.qrcode = qrcode
				this.__init()
			},
			//初始化画布
			async __init() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas', this)
				this.canvasW = uni.upx2px(550);
				this.canvasH = uni.upx2px(900);
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
				//绘制圆角背景
				this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH, uni.upx2px(18), '#FFFFFF')
				//获取标题图片
				let headerImg = await this.getImageInfo(this.headerImg)
				let hW = uni.upx2px(500);
				let hH = uni.upx2px(500);
				//绘制标题图
				this.drawRoundImg(this.ctx, headerImg.path, ((this.canvasW - hW) / 2), ((this.canvasW - hW) / 2), hW,
					hH, uni.upx2px(16))


				//绘制标题
				this.ctx.setFontSize(14); //设置标题字体大小
				this.ctx.setFillStyle('#333'); //设置标题文本颜色
				this.ctx.fillText(this.title, ((this.canvasW - hW) / 2), (((this.canvasW - hW) / 2) + hH + uni.upx2px(
					60)))
				// // 绘制副标题
				// this.ctx.setFontSize(14);
				// this.ctx.setFillStyle('#858585');
				// let sWidth = this.ctx.measureText(this.subTitle).width
				// if(sWidth > hW){
				//     this.ctx.fillText(this.subTitle.slice(0,17) + '...',((this.canvasW-hW) / 2),(
				//     ((this.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				// }else{
				//     this.ctx.fillText(this.subTitle,((this.canvasW-hW) / 2),(
				//     ((this.canvasW-hW) / 2) + hH + uni.upx2px(110)))
				// }
				//绘制价格
				// if(this.content){        
				//     ////console.log(this.content)
				//     this.ctx.setFontSize(14);
				//     this.ctx.setFillStyle('#999');
				//     /* this.ctx.fillText('￥',((this.canvasW-hW) / 2),(((this.canvasW-hW) / 2) + hH + uni.upx2px(120))) */
				//     this.ctx.setFontSize(12);
				//     this.ctx.fillText(this.content,(((this.canvasW-hW) / 2) + uni.upx2px(36)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(120)))
				// }
				//绘制虚线
				this.drawDashLine(this.ctx, uni.upx2px(20), (((this.canvasW - hW) / 2) + hH + uni.upx2px(150)), (this
					.canvasW - uni.upx2px(20)), (((this.canvasW - hW) / 2) + hH + uni.upx2px(150)), 5)
				//左边实心圆
				this.drawEmptyRound(this.ctx, 0, (((this.canvasW - hW) / 2) + hH + uni.upx2px(150)), uni.upx2px(20))
				//右边实心圆
				this.drawEmptyRound(this.ctx, this.canvasW, (((this.canvasW - hW) / 2) + hH + uni.upx2px(150)), uni
					.upx2px(20))
				// //提示文案
				// this.ctx.setFontSize(12);
				// this.ctx.setFillStyle('#858585');
				// this.ctx.fillText('测试文字',(((this.canvasW-hW) / 2) + uni.upx2px(20)),(((this.canvasW-hW) / 2) + hH + uni.upx2px(200)))
				//底部广告
				let BottomAdImg = await this.getImageInfo(this.bottomAdImg)
				this.ctx.drawImage(BottomAdImg.path, 0, this.canvasH - uni.upx2px(550) * (800 / 2172), uni.upx2px(550),
					uni.upx2px(550) * (800 / 2172))
				// let BottomAdImg = await this.getImageInfo(this.headerImg)
				// this.ctx.drawImage(BottomAdImg.path, 50, 380, 50, 50)
				//小程序码
				let qrcodeImg = await this.getImageInfo(this.qrcode)
				this.ctx.drawImage(qrcodeImg.path, uni.upx2px(10), this.canvasH - uni.upx2px(550) * (800 / 2172) *
					0.9 - uni.upx2px(10), uni.upx2px(550) * (800 / 2172) * 0.9, uni.upx2px(550) * (800 / 2172) *
					0.9)
				//延迟渲染
				setTimeout(() => {
					this.ctx.draw(true, () => {
						uni.hideLoading()
					})
				}, 500)
			},
			//绘制实心圆
			drawEmptyRound(ctx, x, y, radius) {
				ctx.save()
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
				ctx.setFillStyle('rgba(0, 0, 0, .4)')
				ctx.fill();
				ctx.restore()
				ctx.closePath()
			},
			//绘制虚线
			drawDashLine(ctx, x1, y1, x2, y2, dashLength) {
				ctx.setStrokeStyle("#cccccc") //设置线条的颜色
				ctx.setLineWidth(1) //设置线条宽度
				var dashLen = dashLength,
					xpos = x2 - x1, //得到横向的宽度;
					ypos = y2 - y1, //得到纵向的高度;
					numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);
				//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;
				for (var i = 0; i < numDashes; i++) {
					if (i % 2 === 0) {
						ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
						//有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；
					} else {
						ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);
					}
				}
				ctx.stroke();
			},
			//带圆角图片
			drawRoundImg(ctx, img, x, y, width, height, radius) {
				ctx.beginPath()
				ctx.save()
				// 左上角
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
				// 右上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)
				// 右下角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5)
				// 左下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI)
				ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, x, y, width, height);
				ctx.restore()
				ctx.closePath()
			},
			//圆角矩形
			drawRoundRect(ctx, x, y, width, height, radius, color) {
				ctx.save();
				ctx.beginPath();
				ctx.setFillStyle(color);
				ctx.setStrokeStyle(color)
				ctx.setLineJoin('round'); //交点设置成圆角
				ctx.setLineWidth(radius);
				ctx.strokeRect(x + radius / 2, y + radius / 2, width - radius, height - radius);
				ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
				ctx.stroke();
				ctx.closePath();
			},
			//获取图片
			getImageInfo(imgSrc) {
				let that = this
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							resolve(image);
						},
						fail: (err) => {
							uni.showToast({
								duration: 2000,
								title: "获取数据失败",
								icon: "none"
							})
							that.isShow = false
							reject(err);
						}
					});
				});
			},
			async saveImage() {
				let that = this
				uni.getSetting({
					success: res => {
						if (!res.authSetting["scope.writePhotosAlbum"]) {
							//向用户发起授权请求
							uni.authorize({
								scope: "scope.writePhotosAlbum",
								success: () => {
									uni.showLoading({
										title: '正在加载',
										mask: false
									});
									uni.canvasToTempFilePath({
										canvasId: 'my-canvas',
										quality: 1,
										complete: (res) => {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success(res) {
													uni.hideLoading();
													uni.showToast({
														title: '已保存到相册',
														icon: 'success',
														duration: 2000
													})
													setTimeout(() => {
														that.isShow =
															false
													}, 2000)
												},
												fail(err) {
													uni.hideLoading();
													uni.showToast({
														title: '已取消保存',
														icon: "error",
														duration: 1500
													});
												}
											})
										}
									}, this);
								},
								//授权失败
								fail: () => {
									uni.showModal({
										title: "您已拒绝获取相册权限",
										content: "是否进入权限管理，调整授权？",
										success: (res) => {
											if (res.confirm) {
												//调起客户端小程序设置界面，返回用户设置的操作结果。（重新让用户授权）
												uni.openSetting({
													success: (res) => {
														// console.log(res.authSetting);
													},
												});
											} else if (res.cancel) {
												return uni.showToast({
													icon: "none",
													title: "已取消！",
												});
											}
										},
									});
								}
							})
						}else{
							uni.showLoading({
								title: '正在加载',
								mask: false
							});
							uni.canvasToTempFilePath({
								canvasId: 'my-canvas',
								quality: 1,
								complete: (res) => {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success(res) {
											uni.hideLoading();
											uni.showToast({
												title: '已保存到相册',
												icon: 'success',
												duration: 2000
											})
											setTimeout(() => {
												that.isShow =
													false
											}, 2000)
										},
										fail(err) {
											uni.hideLoading();
											uni.showToast({
												title: '已取消保存',
												icon: "error",
												duration: 1500
											});
										}
									})
								}
							}, this);
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999999;
		background: rgba(0, 0, 0, .4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.save-btn {
			margin-top: 35rpx;
			color: #FFFFFF;
			background: linear-gradient(to right, #FE726B, #FE956B);
			padding: 15rpx 40rpx;
			border-radius: 50rpx;
		}
	}
</style>
